<template>
  <div class="member-information">
    <!-- 企业信息 -->
    <div class="header">企业信息</div>
    <div class="item">
      <div class="item-name">企业图片</div>
      <img src="../../../../static/images/gongqiu_add_btn.png" alt="" class="logo" v-if="!logoImg" @click="uploadLogo" mode="widthFix">
      <img :src="logoImg" alt="" class="logo" v-else @click="uploadLogo" mode="aspectFit">
    </div>
    <div class="item">
      <div class="item-name">企业名称</div>
      <input type="text" placeholder="请输入企业名称" v-model="enterpriseName">
    </div>
     <div class="item item-tag">
      <div class="item-name item-tag-name">企业标签</div>
      <input type="text" placeholder="字数不能超过10个,最多4个标签" v-model="tag" class="tag-input">
      <div class="add-tag" @click="addTag">添加</div>
      
      <div class="tag-list" v-if="tagList.length>0">
        <div 
        class="tag-list-item"
        v-for="(item,index) of tagList"
        :key="index"
        >
        <div>{{item}}</div>
        <img src="../../../../static/images/delete.png" alt="" @click="delTag(index)">
      </div>
      </div>
    </div>
    <div class="item">
      <div class="item-name">法定代表人</div>
      <input type="text" placeholder="请输入法定代表人" v-model="referee">
    </div>
    <div class="item">
      <div class="item-name">所属行业</div>
      <input type="text" placeholder="请输入所属行业" v-model="industry">
    </div>
    
    <div class="item">
      <div class="item-name">企业地址</div>
      <picker @change="getAddress"   mode="region">
          <div class="picker" v-if="!addressProvince">请选择企业地址</div>
          <div v-else>{{addressProvince}} {{addressCity}} {{addressArea}}</div>
        </picker>
    </div>
    <div class="item">
      <div class="item-name">详细地址</div>
      <input type="text" placeholder="请输入详细地址" v-model="addressDetail">
    </div>
   <div class="item">
      <div class="item-name">联系方式</div>
      <input type="phone" placeholder="请输入联系方式" v-model="contact">
    </div>
    <div class="item">
      <div class="item-name">企业简介</div>
      <textarea v-model="desc" placeholder="输入企业简介"></textarea>
    </div>
    <!-- 企业信息 end -->

    <!-- 个人信息  -->
    <div class="header">个人信息</div>
    <div class="item">
      <div class="item-name">职位</div>
      <input type="text" placeholder="请输入职位" v-model="position">
    </div>
    <!-- 个人信息 end -->

    <div class="header">宣传内容</div>
    <!-- 上传视频 -->
    <div class="item-radio">
       <div class="radio-wrapper" v-if="video_url">
         <div class="delete-logo" @click="deleteVideo">
          <img src="../../../../static/images/delete.png" alt="">
        </div>
        <video id="myVideo"  :src="video_url" controls ></video>
       </div>
        <div class="item-textarea" @click="uploadVideo" v-else>
          <div class="tip1">添加视频</div>
        </div>
     </div>
     <!-- 上传视频 end -->

     <upLoadImgMy @getImgIdList="getImgIdList"  :imgListInit="imgListInit"></upLoadImgMy>
    <div class="divide"></div>
  
    <div class="submit-wrapper">
      <div class="submit" @click="submit">提交</div>
    </div>
  </div>
</template>

<script>
import AREA from '../../../../static/json/area.json';
import upLoadImgMy from '@/components/uploadImg';
export default {
  data() {
    return {
      companyId:'',
      logoImg:'',//企业头像
      logoImgId:'',
      enterpriseName:'',//企业名
      referee:'',//法定代表人
      industry:'',//所属行业
      tag:'',
      tagList:[],

      addressProvince:'',//所在地的省市区
      addressCity:'',
      addressArea:'',
      addressDetail:'',
      contact:'',
      desc:'',//企业简介
      
      realname:'',
      phone:'',
      position:'',//职位

      video_url:'',//视频地址
      video_id:'',
      imgListInit:[],//初始的宣传图片列
      imglistNow:''//宣传的照片列
    }
  },
  components:{
    upLoadImgMy
  },
  methods: {
    getImgIdList(e){
      //获取宣传上传的图片列
      this.imglistNow=e
    },
    uploadVideo(){
      //上传视频
      var that = this
      wx.chooseVideo({
        success: function(res) {
          that.uploadCallback(res)
        }
      })
    },
    uploadCallback: function(res1) {
      const that=this
      var src = res1.tempFilePath;
      wx.uploadFile({
        url: 'https://www.rzkeji.com/api/file/upload-video',//服务器接口
        method: 'POST',//这句话好像可以不用
        filePath: src,
        header: {
          'content-type': 'multipart/form-data'
        },
        name: 'video',//服务器定义的Key值
        success: function(res) {
          const res1=JSON.parse(res.data)
          that.video_id=res1.data.id;
          that.video_url=res1.data.video_url;
        },
        fail: function() {
          console.log('接口调用失败')
        }
    })},
    deleteVideo(){
      this.video_id='';
      this.video_url=''
    },
   async uploadLogo(){
      //上传公司头像
      let data=await this.$currency.upLoadImage();
      let res=JSON.parse(data.data);
      this.logoImg=res.data.img_url;
      this.logoImgId=res.data.id;
    },

    async submit(){//上传
      const userToken=wx.getStorageSync('userToken');
      let params={
        id:this.companyId,
        user_token:userToken,
        company_name:this.enterpriseName,
        desc:this.desc,
        province:this.addressProvince,
        city:this.addressCity,
        area:this.addressArea,
        company_address:this.addressDetail,
        legal_person:this.referee,
        industry:this.industry,
        contact:this.contact,
        labels:this.tagList,
        position:this.position,
        video_id:this.video_id,
        logo_id:this.logoImgId,
        img_ids:this.imglistNow
      }
      const res=await this.$api.buildCompanyInfo(params)
      this.$currency.showToast(res.data.message);
      setTimeout(()=>{
          if(res.data.level=='success'){
          wx.switchTab({url:'/pages/meMain/me/main'})
        }
      },1000)
    },
    getAddress(e){
      //获取所在地省市区
      const address=e.target.value;

      this.addressProvince=address[0];
      this.addressCity=address[1];
      this.addressArea=address[2];
    },
    addTag(){
      //添加标签
      if(this.tag==''){
        this.$currency.showToast('标签内容不能为空');
        return
      }
      if(this.tag.length>10){
        this.$currency.showToast('标签不能大于10字');
        return
      }
      if(this.tagList.length>4){
        this.$currency.showToast('已有4个标签');
        return
      }
      this.tagList.push(this.tag);
      this.tag='';
    },
    delTag(index){
      //删除标签
      this.tagList.splice(index,1)
    },

    async getUserInfo(){
      const userToken=wx.getStorageSync('userToken');
     const res=await this.$api.getUserInfo({
        user_token:userToken
      })
      if(res.data.level=='success'){
       let myCompany=res.data.data.user_info.user_vip.company_info;
       
      this.companyId=myCompany.id
       this.logoImg=myCompany.logo_url;
       this.logoImgId=myCompany.img_id;
       this.enterpriseName=myCompany.company_name;
       this.tagList=[];
       this.referee=myCompany.legal_person;
       this.industry=myCompany.industry;
       this.addressProvince=myCompany.province;
       this.addressCity=myCompany.city;
       this.addressArea=myCompany.area;
       this.addressDetail=myCompany.company_address;
       this.contact=myCompany.contact;
       this.desc=myCompany.desc;
       this.position=myCompany.position;
       this.video_url=myCompany.video_url;
       this.video_id=myCompany.video_id;
       this.imgListInit=myCompany.img_url_list;

        this.tagList=myCompany.company_label_list.map(item=>{
          return item.name
        })
        this.$store.dispatch('_setWXUserInfo',res.data.user_info);   //把获取到的用户的信息存放在vuex中进行管理
      }
    },
    initData(){
      this.companyId=''
      this.logoImg='';//企业头像
      this.logoImgId='';
      this.enterpriseName='';//企业名
      this.referee='';//法定代表人
      this.industry='';//所属行业
      this.tag='';
      this.tagList=[];

      this.addressProvince='';//所在地的省市区
      this.addressCity='';
      this.addressArea='';
      this.addressDetail='';
      this.contact='';
      this.desc='';//企业简介
      
      this.realname='';
      this.phone='';
      this.position='';//职位

      this.video_url='';//视频地址
      this.video_id='';
      this.imgListInit=[];//初始的宣传图片列
      
    }
    
  },
  onLoad(){
    this.initData()
    this.getUserInfo();


  }
}
</script>

<style lang="scss" scoped>
    @mixin baseBtn{
      color:#fff;
      background-color: rgb(22, 155, 213);
      text-align: center;
      border-radius:10px;
    }
    .header{
      font-weight: 600;
      padding:20px 0;
      
    }
    .member-information{
      width:calc(100% - 20px);
      margin-left:10px;
    }
    .item-tag{
      flex-wrap: wrap;
      // .item-tag-name{
      //   width: 40px;
      // }
    }
    .item-profile{
      border-bottom: none !important;
    }
    .item{
      display:flex;
      align-items: center;
      border-bottom: 1px solid #eee;
      padding:15px 0;
      position: relative;
      .logo{
        width: 150px;
        height: 150px;
      }
      picker{
        flex:1
      }
      textarea{
        border:1px solid #eee;
      }
      .delete{
      width:40px;
      height: 40px;
      position: absolute;
      top:-20px;
      left: -20px;
    }
      .item-name{
        min-width: 60px;
        white-space: nowrap;
        margin-right: 20px;
      }
      .tag-list{
        border-radius: 10px;
        margin-top:20px;
        width: 100%;
        display:flex;
        flex-wrap: wrap;
        align-content: flex-start;
        padding:5px;
        img{
          width:20px;
          height: 20px;
          position: absolute;
          right:-10px;
          top:-10px;
        }
      }
      .tag-list-item{
        border:1px solid #eee;
        height: 30px;
        line-height: 30px;
        border-radius: 5px;
        padding:0 2px;
        margin:0 15px 15px 0;
        position: relative;
      }
      .tag-input{
        flex:1;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
      }
      .add-tag{
        @include baseBtn;
        width:70px;
        height: 30px;
        line-height: 30px;
      }
      .picker{
        color:gray;
      }
      .upload-img{
        color:#fff;
        background-color: rgb(22, 155, 213);
        padding: 5px 15px;
        border-radius: 5px
      }
      select_self{
        flex:1;
      }
    }
    .last-item{
      padding-bottom:120px;
    }
    .text-area{
        border: 1px  solid gray;
        min-height: 60px;
        border-radius: 5px;
        width: 100%;
        box-sizing: border-box;
      }

    
    .company-btn{
      margin: 0 60px 60px 60px;
      color:#fff;
      background-color: rgb(22, 155, 213);
      border-radius: 5px;
      padding:10px;
      text-align:center;

    }
    .submit-wrapper{
      width: 100%;
      display: flex;
      justify-content: center;
      
      .submit{
      @include baseBtn;
      padding:10px 0;
      position:fixed;
      z-index:9999;
      bottom:0px;
      width:90%;
    }
    }
    
    .company-wrapper{
      padding-bottom:10px;
    }

    .divide{
      padding-bottom: 100px;
    }

    //宣传
    .item-radio{
      background: #fff;
      margin-bottom: 10px;
      video{
        width: 100%;
      }
      .radio-wrapper{
        position: relative;
      }
      .delete-logo{
        position: absolute;
        right: -15px;
        top:-15px;
        z-index: 99;
        img{
          width: 30px;
          height: 30px;
        }
      }
      .item-textarea{
        border:2px dashed gray;
        width: 100%;
        height: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .tip1{
        color:gray;
      }
  }

</style>